<template>
  <nav id='nav'>
      <span>
        <router-link :to='{name:"Home"}' class='Link' tag='div' id='home'  @click.native='selected'>主页</router-link>
      </span>
      <span>
        <router-link :to='{ name: "Menage"}' class='Link' tag='div' id='menage'  @click.native='selected'>管理</router-link>
      </span>
      <span>
        <router-link :to='{name:"Register"}' class='Link' tag='div' id='register' @click.native='selected'>注册</router-link>
      </span>
  </nav>
</template>
<style media="screen" scoped>
  .Link{
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin-left: 10px;
  }
  .Link:hover{
    font-size: 20px;
    color:#324057;
    font-weight: bold;
    cursor: pointer;
    /*background-color: #1F2D3D;*/
  }
    .selected{
        border-bottom: 3px solid #20A0FF;
          font-weight: bold;
    }
</style>
<script>
    export default{
      mounted(){
        var path=this.$route.path.split('/')[1];
        console.log(path)
        var nav=document.getElementById(path);
        nav.classList.add('selected');
      },
        data(){
            return {

            }
        },
        methods:{
          selected(item){
            item.target.classList.add('selected');
          }
        }
    }
</script>
